<template>
  <div class="container">
    <div class="add-form">
      <div class="tips">
        <p>
          每个手机号仅能申请一种帐号
          <el-tooltip
            class="item"
            effect="dark"
            content="请填写未注册的手机号"
            placement="top"
          >
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </p>
      </div>
      <el-form ref="registerForm" :model="addForm" :rules="rules" status-icon>
        <el-form-item prop="customCollectorPhone">
          <xy-input
            prefix-icon="el-icon-mobile"
            :placeholder="
              $language.local('请输入') + $language.local('联络人手机号')
            "
            v-model="addForm['customCollectorPhone']"
            clearable
          ></xy-input>
        </el-form-item>

        <el-form-item prop="userPwd">
          <xy-input
            prefix-icon="el-icon-lock"
            :placeholder="$language.local('请输入') + $language.local('密码')"
            v-model="addForm['userPwd']"
            show-password
            clearable
          ></xy-input>
        </el-form-item>
        <el-form-item prop="checkPwd">
          <xy-input
            prefix-icon="el-icon-lock"
            :placeholder="
              $language.local('请再次输入') + $language.local('密码')
            "
            v-model="addForm['checkPwd']"
            show-password
            clearable
          ></xy-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">{{
          $language.local("下一步")
        }}</el-button>
      </span>
    </div>
    <!-- <div class="right"></div> -->
  </div>
</template>

<script>
export default {
  data() {
    let validatePass = (rule, value, callback) => {
      if (!/^\w+$/.test(value)) {
        callback(new Error("输入字符错误!"));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error("手机号错误!"));
      } else {
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.addForm.userPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      addForm: {
        customCollectorPhone: "15116228315",
        userPwd: "123456",
        checkPwd: "123456",
      },
      rules: {
        customCollectorPhone: [
          { required: true, message: "不能为空", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" },
        ],
        userPwd: [
          { required: true, message: "不能为空", trigger: "blur" },
          { min: 6, max: 12, message: "请输入6-12个字符", trigger: "blur" },

          { validator: validatePass, trigger: "blur" },
        ],
        checkPwd: [
          { required: true, message: "不能为空", trigger: "blur" },
          { min: 6, max: 12, message: "请输入6-12个字符", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      console.log(this);
      this.$refs["registerForm"].validate((valided) => {
        if (!valided) {
          return;
        }
        console.log(this.addForm);
        this.$router.push({
          name: `选择类型`,
          params: this.addForm,
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  width: 100%;
  justify-content: center;
  .add-form {
    // flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 0 5rem;
    margin: 5rem 0;
    .tips {
      width: 100%;
      color: #707070;
    }
    .el-form {
      width: 100%;
    }
    //border-right: 1px solid #aaa;
  }
  .right {
    flex: 1;
  }
}
</style>
